<template>
    <div class="container" @dblclick="goNext" >
        <img :src="iconSrc"/>
        <p>{{info.Name}}</p>
    </div>
</template>

<script>
import { BASEIP, BASE_ADDRESS } from '../utils/request'
export default {
    props: ["info","src","delMode"],
    data() {
        return {
            iconSrc: "",
        }
    },
    created() {
        if(this.info.IsDir) {
            this.iconSrc = require('@/assets/folder.png');
        } else {
            let type = this.info.Name.split(".").pop();
            switch (type) {
                case "png":
                case "jpg":
                case "jpeg":
                case "gif":
                case "svg":
                case "wepb":
                    this.iconSrc = require('@/assets/img.png');
                    break;
                case "java":
                    this.iconSrc = require('@/assets/java.png');
                    break;
                case "js":
                    this.iconSrc = require('@/assets/js.png');
                    break;
                case "go":
                    this.iconSrc = require('@/assets/go.png');
                    break;
                case "cpp":
                case "c":
                    this.iconSrc = require('@/assets/cpp.png');
                    break
                case "exe":
                    this.iconSrc = require('@/assets/exe.png');
                    break
                case "md":
                    this.iconSrc = require('@/assets/md.png');
                    break    
                default:
                    this.iconSrc = require('@/assets/file_txt.png');
            }
        }
    },
    methods: {
        goNext() {
            if (this.delMode) {
                this.$emit('delFile')
                return 
            }
            if (this.info.IsDir) { //目录
                this.$emit('changePath')
            }
            else { //文件
                let type = this.info.Name.split(".").pop();
                switch (type) {
                    case "png":
                    case "jpg":
                    case "jpeg":
                    case "gif":
                    case "svg":
                    case "wepb":
                        this.handleImg();
                        break;
                    case "java":
                    case "js":
                    case "go":
                    case "cpp":
                    case "c":
                        this.handleCode(type);
                        break;
                    default:
                        this.handleText();
                }
            }
        },
        handleImg() {
            const path = BASE_ADDRESS + this.dealPath(this.info.Path.slice(2));
            window.open(path);
        },
        dealPath(path) {
            return path.split("\\").join("/");
        },
        handleCode(type) {
            console.log(type);
            this.handleText();
        },
        handleText() {
            this.$store.commit("setEditorFilePath",this.info.Path);
            console.log(this.info.Path);
            this.$store.commit("setEditor",true);
        }
    }
}
</script>

<style lang="less" scoped>
    .container {
        margin-top: 20px;
        margin-left: 50px;
        width: 100px;
        img {
            width: 100%;
        }
        p {
            text-align: center;
            margin-right: 8px;
            width :100px;
            font-size: 14px;
            line-height: 14px;
            height: 16px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }
    .container:hover {
        cursor: pointer;
        border: 1px solid rgba(255, 255, 255,0.4);
    }
</style>